// src/pages/home/widgets/channel/index.tsx
import { useNavigate } from "react-router-dom";
import styles from "@pages/home/widgets/channel/styles/styles.module.less";
import classNames from "classnames";
import GeekIcon from "@shared/geekIcon";
import UserChannel from "@pages/home/widgets/userChannel";
import { useTypedSelector } from "@store/index";
import { selectToken } from "@slice/token";
import GuestChannel from "@pages/home/widgets/guestChannel";
import Slide, { SlideRef } from "@shared/slide";
import { useRef, useState,useCallback } from "react";
import useChannelScroll from "@pages/home/widgets/common/scroll";
import UpdateUserChannel from "@pages/home/widgets/updateUserChannel";
import UpdateGuestChannel from "@pages/home/widgets/updateGuestChannel";
// 模拟数据
const channels = [
  "推荐",
  "HTML",
  "开发者资讯",
  "C++",
  "CSS",
  "数据库",
  "区块链",
  "go",
  "产品",
  "后端",
  "linux",
  "人工智能",
  "php",
  "javascript",
  "架构",
  "前端",
  "python",
  "java",
  "科技动态",
  "数码产品",
];

export default function Channel() {
  const navigate = useNavigate();
  // 获取用户登录凭据
  const token = useTypedSelector(selectToken);
  const slideRef = useRef<SlideRef | null>(null);
  return (
    <>
    <div className={styles.container}>
      <div className={styles.list}>
       {token ? <UserChannel /> : <GuestChannel />}
      </div>

      <div className={styles.aside}>

        <div className={styles.search}>
        <GeekIcon
      onClick={() => navigate("/search")}
      type={"iconbtn_search"}
      className={styles.search_icon} />
        </div>

        <div className={styles.menu}>
        <GeekIcon onClick={() => slideRef.current?.open()} type={"iconbtn_channel"} className={styles.channel_icon} />
        </div>
      </div>
      
    </div>
    <Slide ref={slideRef} direction={"toRight"}>
    {token ? <UpdateUserChannel slideRef={slideRef} /> : <UpdateGuestChannel slideRef={slideRef} />}
  </Slide>
  </>
  );
}